<template>
  <div class="home">
    <my-head title="喵咪食物"></my-head>
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in types" :key="item._id" :title="item.title"></van-tab>
    </van-tabs>
    <div>
      <van-divider />
      <div class="sort_box">
        <section>综合</section>
        <section>
          <span class="price-sort" @click="sortPrice">价格 <i class="iconfont icon-shang" :class="{red: state === 1}"></i><i class="iconfont icon-xia" :class="{red: state === 2}"></i> </span>
        </section>
        <section>
          <span>销量<i class="iconfont icon-xia"></i></span>
        </section>
      </div>
      <van-divider />
    </div>

    <van-grid :column-num="2">
      <van-grid-item class="item_box" v-for="item in list" :key="item._id" @click="itemClick(item._id)">
        <van-image lazy-load :src="item.pic"/>
        <p>{{item.title}}</p>
        <section class="sale-info">
          <span>
            <em class="rmb-icon">￥</em>
            <em class="now-price">{{item.price}}</em>
            <del class="old-price">{{item.old_price}}</del>
          </span>
          <span class="has-saled">已售：14件</span>
        </section>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
// 引用数据类型有 array object function 
// 基本数据类型 string number undefined null boolean symbol
import head from '@/components/head'
import { getTypes, getLists } from '../utils/api'
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);
export default {
  name: 'Home',
  components: {
    myHead: head
  },
  data() {
    return {
      active: 0,
      types: [],
      list: [],
      // 价格排序状态 0表示默认排序 1表示升序 2 表示降序
      state: 0,
      originList: []
    }
  },
  created() {
    // 请求分类数据
    getTypes().then(res =>{
      // console.log(res)
      this.types = res.data.result
      // console.log(this.types[0])
      this.getList(this.types[0]._id)
    })

    // 请求列表数据
    
  },
  methods:{
    // 点击跳转进入详情页面
    itemClick(id) {
      this.$router.push({
        name: 'Detail',
        query: {
          id
        }
      })
    },

    //点击头部导航切换页面数据
    tabClick(ind) {
      // ind值是当前tab的索引值
      // console.log(val)
      // console.log(id)
      let id = this.types[ind]._id
      this.getList(id)
    },

    // 请求列表数据的方法
    getList(id) {
      // console.log(id)
      getLists(id).then(res => {
        this.list = res
        this.originList = JSON.stringify(res)
      })
    },

    // 价格排序
    sortPrice() {
      if(this.state === 0) {
        this.state = 1
      } else if(this.state === 1) {
        this.state = 2
      } else if(this.state === 2) {
        this.state = 0
        this.list = JSON.parse(this.originList) 
        return
      }
      this.sortFn(this.state)
    },

    // 排序逻辑
    sortFn(state) {
      this.list.sort((item1, item2) => {
        if(state === 1) {
          return item1.price*1 - item2.price*1
        } else if(state === 2) {
          return item2.price*1 - item1.price*1
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .sort_box{
    display: flex;
    justify-content: space-between;
    padding: 0 .3rem;
    font-size: .24rem;
    section {
      font-size: .24rem;
      .price-sort{
        position: relative;
        i{
          position: absolute;
          left: .6rem;
        }

        .icon-shang{
          top: -5px;
        }

        .icon-xia{
          bottom: -5px;
        }

        .red{
          color: red;
        }
      }
    }
  }

  .item_box{
    font-size: .32rem;
    img{
      width: 100%;
    }

    p{
      font-size: .26rem;
      margin-top: .3rem;
      text-align: left;
      width: 100%;
      line-height: .4rem;
    }
  }
  .sale-info{
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: .26rem;
    line-height: .6rem;
    color: coral;
    .has-saled{
      color: #888;
    }
    .old-price{
      color: #888;
      margin-left: .1rem;
    }
    .now-price{
      font-size: .36rem;
    }
  }
</style>
